import * as Vue from 'vue';
import { render, ref, watchEffect } from '@vue/runtime-dom';
import { compile } from '@vue/compiler-dom';

const app = document.querySelector('#app');
const context = {
  title: ref("由模板编译生成vnode,需要额外引入@vue/compiler-dom"),
  change: () => context.title.value = Math.random()
};

function createRoot() {
  // 1. 模板字符串
  const template = `<div><h1 >{{title}}</h1>
  <button @click="change">change</button>
  </div>`;

  // 2. 编译模板成渲染函数代码
  const compiled = compile(template);
  console.log(compiled.ast);//抽象语法树
  console.log(compiled.code);//编译生成的渲染函数源代码（String类型）
  // 3. 使用 new Function 创建渲染函数
  const renderFunction = new Function('Vue', compiled.code)(Vue);
  // 4. 执行渲染函数，生成 VNode
  const vnode = renderFunction(context);
  return vnode;
}
// 5. 将 VNode 渲染到 DOM
watchEffect(() => render(createRoot(), app))